<template>
  <div>
    <table-sheet ref="tableSheet" :height="activeData.height" :width="activeData.width"></table-sheet>
    <!-- <table-sheet></table-sheet> -->
    <div id="simple-controls">
      <el-button @click="onTest">测试</el-button>
      <table-sheet-setting :activeData="activeData"></table-sheet-setting>
    </div>
  </div>
</template>

<script>
import TableSheet from '@/components/FormGenerator/components/ts-components/tableSheet/index.vue'
import TableSheetSetting from '@/components/FormGenerator/views/index/panelProperties/tableSheet/index.vue'

export default {
  name: '',
  props: [],
  components: {
    TableSheet,
    TableSheetSetting
  },
  data() {
    return {
      activeData: {
        height: 400,
        width: 600
      }
    };
  },
  provide() {
    return {
      useConf(){
        return {
          __config__: {}
        }
      }
    }
  },
  created() {},
  mounted() {
  },
  methods: {
    async onTest(){
      let config = this.$refs.tableSheet.sheetInstance.saveToConfig()
      console.log('config', config)
    },
  },
  watch: {},
  computed: {
  }
};
</script>

<style lang="scss" scoped>
#simple-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  background: white;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  font-family: Arial, sans-serif;
  z-index: 100;
  width: 300px;
  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }
}
</style>
